<template>
  <div>
    <div class="banner-content home-banner">
      <div class="flex_bt homes home-banner-content">
        <div>
          <h1>佛狮供应链</h1>
          <h3>中国家具物流行业首选服务商</h3>
          <h6>提供运输、配送、安装、中转仓等服务</h6>
          <p class="sub">Feslion supply chain</p>
        </div>
        <div class="logos">
          <el-image
            :src="'https://www.feslion.com/picture/lion.png'"
            alt=""
            style="object-fit: cover"
          />
        </div>
      </div>
      <div class="tabs flex_bt home-banner-content">
        <div>
          <el-tooltip class="box-item" effect="light" placement="bottom">
            <template #content>
              <el-image
                style="width: 100px; height: 100px; margin: 0 auto"
                src="https://www.feslion.com/picture/miniprogram_code.jpg"
              />
            </template>
            <div>
              <img src="@/assets/images/icons/weixin.png" alt="" />
              <span>微信下单</span>
            </div>
          </el-tooltip>
        </div>
        <div @click="tabHandle('customs-placeorder-index')">
          <img src="@/assets/images/icons/palce.png" alt="" />
          <span>在线下单</span>
        </div>
        <div @click="tabHandle('register')">
          <img src="@/assets/images/icons/resiter.png" alt="" />
          <span>立即注册</span>
        </div>
        <div @click="tabHandle('customs-placeorder-index')">
          <img src="@/assets/images/icons/palce.png" alt="" />
          <span>在线下单</span>
        </div>
      </div>
    </div>
    <div class="officialweb-container-center home">
      <!-- 我的优势 -->
      <div class="advantage">
        <p class="title">我们的优势</p>
        <p class="sub">Our advantages</p>
      </div>
      <div class="advantageinfo flex_bt">
        <div class="info-box" v-for="(item, key) in data.worker" :key="key">
          <img :src="'https://www.feslion.com/picture/' + item.imgs" alt="" />
          <span>{{ item.tile }}</span>
        </div>
      </div>
    </div>
    <!--  家居类型 -->
    <div class="furnituretitle">
      <div>
        <span class="title">配送服务辐射全国</span>
        <span class="sub">支持各种家具产品上门安装</span>
      </div>
    </div>
    <div class="furniture officialweb-container-center">
      <el-row>
        <el-col :span="4" v-for="(item, index) in data.goods" :key="index">
          <div class="goods">
            <div class="imgs">
              <el-image
                fit="contain"
                lazy
                :src="
                  'https://www.feslion.com/picture/' +
                  ('z-goods-' + (index + 1) + '.png')
                "
              />
            </div>
            <p>{{ item }}</p>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="member member_home_content">
      <div class="vipcontent flex">
        <div class="vips"></div>
        <div class="content">
          <div class="title">开会员 省运费</div>
          <div class="sub">
            新注册用户<br />
            可领取7天免费VIP会员卡<br />
            享受专属折扣
          </div>
        </div>
      </div>
      <div class="equity">现在开通你将获得以下<span>权益</span></div>
      <div class="list flex_bt">
        <div v-for="item in 5" :key="item">
          <span class="round"></span>
          <span class="title">待定填充</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Index">
const version = ref("3.8.6");
const data = reactive({
  worker: [
    {
      tile: "合作师傅6661+",
      imgs: "worker.jpg",
    },
    {
      tile: "自有车辆5679+台",
      imgs: "car.jpg",
    },
    {
      tile: "直营服务基地957+",
      imgs: "cargo.jpg",
    },
  ],
  goods: [
    "茶几类",
    "沙发类",
    "大件衣柜",
    "床类",
    "凳椅类",
    "床垫类",
    "电视柜类",
    "玻璃橱物柜酒柜",
    "斗柜类",
    "书柜类",
    "鞋柜类",
    "小架类",
  ],
});

// export { default as Footer } from '../layout/components/Footer'
function tabHandle(val) {
  //
  // let str = "clogin";
  // if (val == "palce") {
  //   str = "customs-placeorder-index";
  // }

  window.open("https://cms.yzb16888.com/#/" + val, "__blank");
}
function goTarget(url) {
  window.open(url, "__blank");
}
</script>

<style scoped lang="scss">
.home-banner {
  background: url(https://www.feslion.com/picture/background.jpg);
  background-size: 100% 100%;
  color: #fff;
  position: relative;
  font-family: MiSans-Light;
  // min-height: 639px;
  height: auto;
  overflow: hidden;
  // padding: 61px auto 39px;
  .homes {
    align-items: center;
    height: 519px;
    margin: 61px 0 39px;
  }
  .tabs {
    // transform: scale(1);
    width: 100%;
    height: 105px;
    // padding: 0 500px;
    background-color: rgba(252, 165, 141, 0.25);
    position: absolute;
    left: 0;
    bottom: 0;
    div {
      // width: 80px;
      height: 80px;
      display: flex;
      cursor: pointer;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      img {
        width: 45px;
        height: 44px;
      }
      span {
        font-size: 14px;
        // font-family: MiSans-Normal;
        font-weight: 400;
        letter-spacing: 0px;
      }
    }
  }
  .logos {
    width: 372px;
    height: auto;
    // height: 519px;
    // background: url(https://www.feslion.com/picture/lion.png);
    // background-size: 100% 100%;
  }
  h1 {
    font-size: 33px;
    // margin-top: 160px;
    font-family: MiSans-Demibold;
    letter-spacing: 5px;
  }
  h3 {
    font-size: 30px;
    margin: 33px 0 15px;
    letter-spacing: 5px;
    font-family: MiSans-Light;
  }
  h6 {
    font-size: 18px;
    font-family: MiSans-Light;
    letter-spacing: 3px;
    margin-bottom: 45px;
  }
  .sub {
    font-size: 17px;
    letter-spacing: 3px;
    line-height: 0;
  }
  .sub::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 13px;
    background-color: #ffffff;
    margin-right: 5px;
  }
}
.home {
  // padding: 0 150px;
  .advantage {
    width: 608px;
    height: 273px;
    // line-height: 273px;
    background: url(https://www.feslion.com/picture/map.jpg);
    background-size: 100% 100%;
    margin: 84px auto 32px;
    color: #333333;
    text-align: center;
    padding: 98px 0;

    .title {
      font-size: 49px;
      // font-family: MiSans-Semibold;
      font-weight: 800;
      letter-spacing: 1px;
    }
    .sub {
      font-family: MiSans-Medium;
      font-size: 18px;
      letter-spacing: 0px;
      // margin-top: 5px;
    }
  }
  .advantageinfo {
    justify-content: space-around;
    .info-box:nth-child(1) {
      width: 419px;
    }
    .info-box:nth-child(2) {
      width: 378px;
    }
    .info-box:nth-child(3) {
      width: 372px;
    }
    .info-box {
      img {
        width: 100%;
        height: 424px;
      }
      span {
        display: block;
        width: 100%;
        margin-top: 18px;
        font-family: MiSans-Medium;
        font-size: 28px;
        // line-height: 32px;
        letter-spacing: 1px;
        color: #cc1d0e;
      }
    }
  }
}
.furnituretitle {
  margin: 139px auto 59px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  &::before {
    content: "";
    display: inline-block;
    width: 131px;
    height: 102px;
    background: url(@/assets/images/home/goodstitle.jpg);
    background-size: 100% 100%;
    margin-right: 10px;
  }
  div {
    display: inline-block;
    font-size: 44px;
    color: #333333;
    // font-family: MiSans-Semibold;
    font-weight: 800;

    letter-spacing: 1px;
    span {
      display: block;
    }
    .sub {
      font-size: 30px;
      opacity: 0.8;
      // font-family: MiSans-Normal;
      font-weight: 400;
    }
  }
}
.furniture {
  // height: 584px;
  background-color: #f6f8fa;
  border-radius: 30px;
  // padding-bottom: 55px;
  // padding-top: 55px;
  overflow: hidden;
  .el-row {
    margin: 95px auto 127px;
    min-height: 350px;
  }
  .el-col-4:nth-child(n + 7) {
    margin-top: 50px;
  }
  .goods {
    display: flex;
    flex-flow: column;
    height: 100%;
    align-items: center;
    justify-content: flex-end;
    .imgs {
      text-align: center;
      width: 120px;
      // height: 120px;
    }
    p {
      margin-top: 20px;
      text-align: center;
      color: #333333;
      font-family: MiSans-Light;
      font-size: 16px;
      letter-spacing: 0px;
    }
  }
}
.member {
  width: 100%;
  background-color: rgba(58, 60, 57, 0.89);
  color: #ffffff;
  .vipcontent {
    // justify-content: space-between;
    .content {
      margin-left: 82px;
      text-align: center;
      .title {
        // font-family: MiSans-Semibold;
        font-weight: 800;

        font-size: 36px;
        letter-spacing: 1px;
        line-height: 21px;
      }
      .sub {
        font-family: MiSans-Light;
        margin-top: 28px;
        font-size: 29px;
        letter-spacing: 1px;
        color: #ffffff;
      }
    }
    .vips {
      width: 399px;
      height: 223px;
      background: url(https://www.feslion.com/picture/vip.png);
      background-size: 100% 100%;
    }
  }
  .equity {
    text-align: center;
    margin: 53px auto 28px;
    font-size: 21px;
    font-family: MiSans-Light;
    letter-spacing: 0px;

    span {
      color: #f04e2f;
    }
    &::after {
      content: "";
      display: block;
      width: 89px;
      height: 3px;
      margin: 18px auto;
      background-color: #f6f8fa;
    }
  }
  .list {
    margin-top: 28px;
    justify-content: space-between;
    div {
      // flex: 1;
    }
    .round {
      width: 117px;
      height: 117px;
      border-radius: 50%;
      background: #f04e2f;
      display: block;
      margin: 0 auto;
    }
    .title {
      width: 100%;
      display: block;
      text-align: center;
      // font-family: MiSans-Light;
      font-weight: normal;

      margin-top: 17px;
      font-size: 16px;
    }
  }
}
</style>
